import { animated, useChain, useSpring, useSpringRef, useSprings, useSpringValue, useTrail } from "@react-spring/web";
import { useEffect } from "react";
import './index.css'

export default function SpringTest5() {
  const api1 = useSpringRef()
  const [springs] = useTrail(
    3,
    () => ({
      ref: api1,
      from: { width: 0 },
      to: { width: 300 },
      config: {
        duration: 1000
      }
    }), []
  )

  const api2 = useSpringRef()
  const [springs2] = useTrail(
    3,
    () => ({
      ref: api2,
      from: { height: 100 },
      to: { height: 50 },
      config: {
        duration: 1000
      }
    }),
    []
  )

  /**
   * useChain 的第二个参数指定了 0 和 1，第三个参数指定了 500，那就是第一个动画在 0s 开始，第二个动画在 500ms 开始。
如果第三个参数指定了 3000，那就是第一个动画在 0s 开始，第二个动画在 3s 开始。
   */
  useChain([api1, api2], [0, 1], 500)



  return <div>
    {springs.map((styles1, index) => (
      <animated.div className="box" style={{ ...styles1, ...springs2[index] }} ></animated.div>
    ))}
  </div>
}